<script setup>
import { } from 'vue'
import { usePlayListStore } from '@/stores/playListStore'
import SongListCard from '@/components/SongListCard/SongListCard.vue'

const usePlayList = usePlayListStore()

</script>

<template>
  <div class="recommend-box">
    <template v-for="item in usePlayList.recommendList" :key="item.id">
      <Router-link :to="`/playList/${item.id}`">
        <SongListCard :song="item" />
      </Router-link>
    </template>
  </div>
</template>

<style scoped lang='scss'>
.recommend-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  div {
    margin: 25px 7px;
  }
}
</style>
